v-show:

與v-if相似，取決於它是控制顯示/隱藏該元素，但始終都存在DOM上，也就是CSS裡使用 display:none。
當然v-show是沒有v-else的用法的，也不支援加在<template>標籤上，這也是它的差異。

<p v-show="true">HelloWorld!</p>

v-html:

將資料當作HTML渲染在元素內，它等同於你使用 javascript 的 innerHtml 屬性，它會將你所綁定的資料解析成 HTML 顯示在 DOM 上。

<template>
  <div id="app">
    <p v-html="msg"></p>
  </div>
</template>
<script>
export default {
    name: 'App',
    data() {
        return {
            msg: "<h1>Hello World</h1>",
        }
    }
}
</script>

但要注意使用v-html淺在的危險，因為假若讓使用者輸入時，會有機會讓有心人士塞入惡意script，簡而言之，不要用使用者所輸入的值綁在v-html指令上。

你的站點上動態渲染的任意HTML可能會非常危險，因為它很容易導致XSS攻擊。請只對可信內容使用HTML插值，絕不要對用戶提供的內容使用插值。

v-text:

將data解析渲染純文字內容，與{{ 插值表示式 }}相似，略有不同的地方是，在頁面加載時，你可能看到 {{ msg }} 稍微閃過的瞬間(可能不易察覺)，而使用 v-text 屬性綁定元素則不會有此問題。

<template>
  <div id="app">
    <p v-text="msg"></p>
    <p>{{ msg }}</p>
  </div>
</template>
<script>
export default {
    name: 'App',
    data() {
        return {
            msg: "Hello World",
        }
    }
}
</script>

不須接表示式的指令:

v-pre:

會在編譯過程時忽略編譯該元素，也就是會按造原樣輸出，指令內的元素內容是甚麼就會顯示甚麼。

<template>
  <div id="app">
    <p v-pre>{{ msg }}</p> // 顯示{{ msg }}
    <p>{{ msg }}</p> // 顯示Hello World
  </div>
</template>
<script>
export default {
    name: 'App',
    data() {
        return {
            msg: "Hello World",
        }
    }
}
</script>

v-cloak:

編譯過程中一直保持在元素上，直到實體編譯結束，我們在v-text有講到關於{{插值表示式}} 在初始頁面加載時會有稍微閃過的瞬間，這時候就可以使用v-cloak。

<template>
  <div id="app">
    <p v-cloak>{{ msg }}</p>
  </div>
</template>
<script>
export default {
    name: 'App',
    data() {
        return {
            msg: "Hello World",
        }
    }
}
</script>
<style lang="scss">
[v-cloak] {
  display: none;
}
</style>

v-once:

將其內容首次渲染後，即便綁定的內容發生改變，也會視為靜態不再追蹤其變化。

<template>
  <div id="app">
    <p v-once>{{ msg }}</p> // 首次渲染後不再改變
    <p>{{ msg }}</p>  // 隨時跟著輸入改變
    <input type="text" v-model="msg">
  </div>
</template>
<script>
export default {
    name: 'App',
    data() {
        return {
            msg: "Hello World",
        }
    }
}
</script>

有任何問題歡迎下方留言，如果喜歡我的文章別忘了按讚、訂閱追蹤加分享唷!!
---我是分隔線-----------------------------------------------------------
PollyPO技術-前端設計轉前端工程師-JS踩坑雜記 30 天
喬依司-實作經典 JavaScript 30
五百億-Vue CLI + Firebase 雲端資料庫 30天打造簡易部落格及後臺管理
eien_zheng-前端小嘍嘍的Golang學習旅程_The journey of learning Golang